<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}/start/layui/css/layui.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/project_name_alert.css">
    <script src="{{ layui.setter.base }}/start/layui/layui.all.js"></script>
</script>
<div class="leon-style">
    <div class="layui-alert-box">
        <div class="layui-alert-title">
            <span class="layui-title-inner layui-col-md4  layui-col-sm4">巡检设备选择</span>
            <span class="layui-title-screen layui-col-md4 layui-col-sm4 layui-col-md-offset3 layui-col-sm-offset3">
                <div class="screen-btn">
                    <span class="search-blank-inner">搜索</span>
                    <span class="search-blank-icon"></span>
                </div>
            </span>
        </div>
        <div class="layui-content">
            <div class="con1 toggle-btn">
                <span class="screen">
                    <i class="query-icon  layui-icon"></i>
                    <span class="query-inner">查询条件</span>
                </span>
                <i class="icon layui-icon layui-icon-down"></i>
            </div>
            <div class="con2 toggle-content">
                <form action="" class="layui-form">
                    <label for="">设备编号:</label>
                    <input type="text" name="" />
                    <label for="">设备名称:</label>
                    <input type="text" name="" />
                    <label for="">供应商:</label>
                    <input type="text" name="" />
                    <button type="button" lay-submit lay-filter="queryTable" class="query layui-btn layui-btn-radius layui-btn-primary">
                        <span class="search-icon"></span>
                        <span class="btn-inner">查询</span>
                    </button>
                </form>
            </div>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>项目名称</th>
                        <th> 项目说明</th>
                        <th>单位</th>
                        <th>最高标准值</th>
                        <th>最低标准值</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>模块润滑</td>
                        <td>润滑油</td>
                        <td>毫升</td>
                        <td>20</td>
                        <td>8</td>
                    </tr>
                    <tr>
                        <td>模块润滑</td>
                        <td>润滑油</td>
                        <td>毫升</td>
                        <td>20</td>
                        <td>8</td>
                    </tr>
                    <tr>
                        <td>模块润滑</td>
                        <td>润滑油</td>
                        <td>毫升</td>
                        <td>20</td>
                        <td>8</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="footer layui-btn-containner">
            <button class="btn1 layui-btn layui-btn-radius layui-btn-primary">添加</button>
            <button class="btn2 layui-btn layui-btn-radius layui-btn-primary">取消</button>
        </div>
    </div>
</div>

<script>
    ! function() {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            admin = layui.admin,
            view = layui.view,
            api = layui.api,
            table = layui.table,
            setter = layui.setter,
            laytpl = layui.laytpl,
            utill = layui.utill,
            form = layui.form,
            element = layui.element;
        $('.toggle-btn').click(function(){
            if ( $('.toggle-content').hasClass('toggle-content-on')) {
                $('.toggle-content').removeClass('toggle-content-on');
                $(this).find('.layui-icon-up').addClass('layui-icon-down').removeClass('layui-icon-up')
            }else {
                $('.toggle-content').addClass('toggle-content-on');
                $(this).find('.layui-icon-down').addClass('layui-icon-up').removeClass('layui-icon-down')
            }
        })
        $('.footer').on('click', 'button', function() {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    }();
</script>
<style>
    .toggle-content {
        display: none;
        transition: all .3s linear;
    }
    .toggle-content-on {
        display: block;
    }
    .leon-style .con1 {
        padding: 10px 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .leon-style .con2 {
        margin: 0 auto;
        width: auto;
        text-align: center;
        padding: 0 20px;
    }
    .leon-style .con1 > span ,
    .leon-style .con1 > i {
        padding: 0;
    }
    .leon-style .layui-alert-box {
        padding: 0;
    }
    .leon-style .layui-table {
        display: table;
    }
</style>